<template>
    <section>
        <div class="title">会员注册</div>
        <div class="wrapper">
            <van-cell title="照片" is-link>
                <template #default>
                    <van-uploader v-model="fileList" multiple :max-count="1" :deletable="false"
                    :max-size="500 * 1024" />
                </template>
            </van-cell>

            <van-field v-model="userInfo.userName" label="姓名" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.userSex" label="性别" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.nation" label="民族" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.xgno" label="工号" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.idcard" label="身份证号" input-align="right" disabled is-link/>

            <van-field v-model="userInfo.birthday" label="出生日期" input-align="right" disabled is-link />

            <van-field v-model="userInfo.userOrganName" label="工作单位" input-align="right" disabled is-link/>

            <van-field required v-model="userInfo.unionName" label="所属工会" input-align="right" disabled is-link @click="showUnion = true" />

            <!-- <van-field v-model="userInfo.userMobile" type="tel" label="联系电话" placeholder="请填写" input-align="right" is-link/> -->

            <van-field required v-model="userInfo.familyOrigin" label="家庭出身" placeholder="请填写家庭出身" input-align="right" is-link/>

            <van-field required v-model="userInfo.classStatus" label="本人成分" placeholder="请填写本人成分" input-align="right" is-link/>

            <van-field required v-model="userInfo.salary" type="tel" label="工资" placeholder="请填写工资" input-align="right" is-link/>

            <van-field required v-model="userInfo.degreeEducation" label="文化程度" placeholder="请填写文化程度" input-align="right" is-link/>

            <van-field required v-model="userInfo.nativePlace" label="籍贯" placeholder="请填写籍贯" input-align="right" is-link/>

            <van-field required v-model="userInfo.department" label="工作单位及职务" placeholder="请填写工作单位及职务" input-align="right"  is-link/>
            <van-field required v-model="userInfo.personnelClassification" label="人员类别" input-align="right" disabled is-link @click="showParems = true" />
            <div class="hintBox">
              <span class="hint">*</span>
              家庭成员及职业
            </div>

            <van-field
              v-model="userInfo.familyMembers"
              rows="3"
              autosize
              type="textarea"
              pla
              ceholder="请输入家庭成员及职业"
            />

            <div class="hintBox">
              <span class="hint">*</span>
              个人简历
            </div>

            <van-field
              v-model="userInfo.resume"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入个人简历"
            />

            <!-- 工会选择 -->
            <van-popup v-model="showUnion" round position="bottom">
              <van-picker
                show-toolbar
                :columns="unionList"
                @cancel="showUnion = false"
                @confirm="selectUnion"
              />
            </van-popup>
            <!-- 工会选择 end -->
            <!-- 人员类别 -->
            <van-popup v-model="showParems" round position="bottom">
                <van-picker
                        show-toolbar
                        :columns="personnelClassificationList"
                        @cancel="showParems = false"
                        @confirm="selectParems"
                />
            </van-popup>
            <!-- 工会选择 end -->
            <p>
                <van-button @click="register" :disabled="isloading" >{{btnTxt}}</van-button>
            </p>
        </div>
    </section>
</template>
<script>
import api from "@/data/api/index.js";

import Vue from 'vue';
import { Field } from 'vant';
import { Cell } from 'vant';
import { RadioGroup, Radio } from 'vant';
import { Popup } from 'vant';
import { DatetimePicker  } from 'vant';
import { Picker } from 'vant';
import { Uploader } from 'vant';
import { Toast } from 'vant';
import 'vant/lib/index.css';

Vue.use(Field);
Vue.use(Cell);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Popup);
Vue.use(DatetimePicker);
Vue.use(Picker);
Vue.use(Uploader);
Vue.use(Toast);

export default {
    data(){
      return{
        //用户信息
        userInfo: {
            userId: '',
            userName: '',
            userSex: '',
            nation: '',
            birthday: '',
            xgno: '',
            userOrgan: '',
            userOrganName: '',
            userMobile: '',
            unionId: '',
            unionName: '',
            photograph: '',
            idcard: '',
            familyMembers: "", // 家庭成员及职业
            resume: "",// 个人简历
            personnelClassification:'',
        },
        isloading:false,
        registerStatus: 0,
        fileList: [],
        photoUrl: {},
        showUnion: false,
          btnTxt:'提交',
        unionList: [],
          showParems:false,
          personnelClassificationList:[],
      }
    },
    mounted() {
      this.getUserInfo();
      this.getUnionList()
      this.getParems();
    },
    methods: {

      // 获取当前用户信息
      getUserInfo(){
          let user = JSON.parse(sessionStorage.getItem("user"));
          this.userInfo = user
          if(this.userInfo.birthday){this.userInfo.birthday = (user.birthday).slice(0,11);}
          // 照片
          this.photoUrl.url = 'https://i.hunnu.edu.cn/ums/avatar/' + user.xgno
          this.photoUrl.isImage = true;
          this.fileList.push(this.photoUrl);
          // 部门编号、部门名称
          // 注册状态
          // this.registerStatus = user.registerStatus;
          // if(0:未审核，1:通过一审,2:通过终审， 3 :初审驳回 4 :终审驳回)
          api.RAAMDGetUser(this.userInfo.xgno).then(res => {
             this.registerStatus=res.registerStatus||''
              if(this.registerStatus=='1'){
                  this.isloading=true
                  this.btnTxt='正在审核中'
              }else if(this.registerStatus=='2'){
                  this.isloading=true
                  this.btnTxt='终审通过'
              }
          });
      },
      // 注册
      register(){

          if(!this.userInfo.unionName?.length > 0){
              Toast("请选择工会");
              return;
          }
          // let tel=this.userInfo.userMobile;
          // if(!tel){
          //     Toast("请填写联系电话！");
          //     return;
          // }
          // if(!check.isTelNum(tel)){
          //     Toast("电话号码格式错误！");
          //     return;
          // }

          if(!this.userInfo.familyOrigin?.length > 0){
              Toast("请输入家庭出身");
              return;
          }

          if(!this.userInfo.classStatus?.length > 0){
              Toast("请输入本人成分");
              return;
          }

          if(!this.userInfo.salary?.length > 0){
              Toast("请输入工资");
              return;
          }

          if(!this.userInfo.degreeEducation?.length > 0){
              Toast("请输入文化程度");
              return;
          }

          if(!this.userInfo.nativePlace?.length > 0){
              Toast("请输入籍贯");
              return;
          }

          if(!this.userInfo.department?.length > 0){
              Toast("请输入工作单位及职务");
              return;
          }
          if(!this.userInfo.personnelClassification?.length > 0){
              Toast("请选择人员类别");
              return;
          }
          if(!this.userInfo.familyMembers?.length > 0){
              Toast("请输入家庭成员及职业");
              return;
          }

          if(!this.userInfo.resume?.length > 0){
              Toast("请输入个人简历");
              return;
          }
          this.userInfo.userSex=this.userInfo.userSex=='男'?'01':this.userInfo.userSex=='女'?'02':this.userInfo.userSex
          api.memberRegister({},this.userInfo).then(res => {
              this.isloading=true
              if(res.code=="success"){

                  let _this=this
                  this.$toast({
                      message:'注册成功，请等待审核！',
                      onClose:function(){
                          sessionStorage.setItem("user",JSON.stringify(_this.userInfo))
                          _this.$router.go(-1)
                      }
                  },);
              }else{
                  Toast(res.desc);
              }
          });
      },
      // 获取工会列表
      getUnionList(){
        api.getlaborUnionList().then(res => {
            this.unionList = res.map(item=>{
              let data = {
                id: item.id,
                text: item.unionName
              }
              return data
            })
        });
      },
        //获取人员类别
        getParems(){
            api.getParemsList().then(res => {

                this.personnelClassificationList = res.map(item=>{
                    let data = {
                        id: item.id,
                        text: item.value
                    }
                    return data
                })
                console.log(this.personnelClassificationList)
            });
        },
      // 工会选择
      selectUnion(value){
        this.userInfo.unionId = value.id
        this.userInfo.unionName = value.text
        this.showUnion = false
      },
        // 人员类别选择
        selectParems(value){
            this.userInfo.personnelClassification = value.text
            this.showParems = false
        },

  },
    filters:{
      sex(val){
          if(val=='01'){
              return '男'
          }else{
              return '女'
          }
      }
    },
}
</script>
<style lang="scss" scoped>
section{
    background: #9C1017;
}
.title{
    height: 46px;
    line-height: 46px;
    margin: 20px 30px;
    color: #fff;
    font-size: 24px;
    background: url(../imgs/gate.png) no-repeat right center;
    background-size: contain;
}
.wrapper{
    padding: 4px;
    font-size: 16px;
    background-color: #fff;
    border-top-left-radius: 35px;
    overflow-x: hidden;
    >p{
        padding: 50px 16px 25px;
        button{
            display: block;
            width: 100%;
            height: 53px;
            color: #fff;
            font-size: 20px;
            background-color: #9E0F16;
            border-radius: 28px;
            :disabled{
                background-color: #ddd;
            }
        }
    }
}
.hintBox{
  padding: 10px 16px 0;
  font-size: 14px;
}
</style>
